<template>
    <div style="display: flex;width: 100%;height: 100vh; ">
        <!-- 右边 -->
        <div style="width: 300px;color: rgb(12, 21, 29); min-height: 100%;">
            <!-- 组件名 -->
            <div style="display:flex ;">
                <h1
                    style="margin-top: 10px;margin-left: 30px;width: 80px;text-align: center;background-color:rgb(240, 20, 31);">
                    {{ 组件名 }}</h1>
                <el-button size="small" style="margin-top: 20px;margin-left: 30px;" @click="重置组件">重置组件</el-button>
            </div>
            <div style="height: 90%;">
                <!-- 属性 -->
                <el-scrollbar height="100%">
                    <!-- 尺寸 -->
                    <div :style='样式1'>
                        <h4>尺寸 : </h4>
                        <spen :style='样式2'>英:size,类型:enum,默认:—</spen><br>
                    </div>
                    <div style="text-align: left; margin-left: 30px;">
                        <el-radio-group v-model="属性.size" size='small' @change="提交改变">
                            <el-radio label=large>大 large</el-radio>
                            <el-radio label="default">中 default</el-radio>
                            <el-radio label="small">小 small</el-radio>
                            <el-radio label="">无 </el-radio>
                        </el-radio-group>
                    </div>
                    <!-- 类型 -->
                    <div :style='样式1'>
                        <h4>类型 : </h4>
                        <spen :style='样式2'>英:type,类型:enum,默认:—</spen><br>
                    </div>
                    <div style="text-align: left; margin-left: 30px;">
                        <el-radio-group v-model="属性.type" size='small' @change="提交改变">
                            <el-radio label=primary>正常 primary</el-radio>
                            <el-radio label="success">成功 success</el-radio>
                            <el-radio label="warning">警告 warning</el-radio>
                            <el-radio label="danger">危险 danger</el-radio>
                            <el-radio label="info">信息 info</el-radio>
                            <el-radio label="text">文本 text</el-radio>
                            <el-radio label="">无 </el-radio>
                        </el-radio-group>
                    </div>

                    <!-- 是否为朴素按钮 -->
                    <div :style='样式1'>
                        <h4>朴素按钮 : </h4>
                        <spen :style='样式2'>英:plain,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style="text-align: left; margin-left: 30px;">
                        <el-radio-group v-model="属性.plain" size='small' @change="提交改变">
                            <el-radio :label=true>是 true</el-radio>
                            <el-radio :label=false>否 false</el-radio>
                            <el-radio :label=null>无 </el-radio>
                        </el-radio-group>
                    </div>
                    <!-- 是否为文字按钮 -->
                    <div :style='样式1'>
                        <h4>文字按钮 : </h4>
                        <spen :style='样式2'>英:text,类型:boolean,默认:FALSE</spen><br>
                    </div>

                    <div style="text-align: left; margin-left: 30px;">
                        <el-radio-group v-model="属性.text" size='small' @change="提交改变">
                            <el-radio :label=true>是 true</el-radio>
                            <el-radio :label=false>否 false</el-radio>
                            <el-radio :label=null>无 </el-radio>
                        </el-radio-group>
                    </div>

                    <!-- 是否为文字按钮 -->
                    <div :style='样式1'>
                        <h4>显示文字按钮背景颜色 : </h4>
                        <spen :style='样式2'>英:bg,类型:boolean,默认:FALSE</spen><br>
                    </div>

                    <div style="text-align: left; margin-left: 30px;">
                        <el-radio-group v-model="属性.bg" size='small' @change="提交改变">
                            <el-radio :label=true>是 true</el-radio>
                            <el-radio :label=false>否 false</el-radio>
                            <el-radio :label=null>无 </el-radio>
                        </el-radio-group>
                    </div>
                    <!-- 是否为链接按钮 -->
                    <div :style='样式1'>
                        <h4>链接按钮 : </h4>
                        <spen :style='样式2'>英:link,类型:boolean,默认:FALSE</spen><br>
                    </div>

                    <div style="text-align: left; margin-left: 30px;">
                        <el-radio-group v-model="属性.link" size='small' @change="提交改变">
                            <el-radio :label=true>是 true</el-radio>
                            <el-radio :label=false>否 false</el-radio>
                            <el-radio :label=null>无 </el-radio>
                        </el-radio-group>
                    </div>
                    <!-- 是否为圆角按钮 -->
                    <div :style='样式1'>
                        <h4>圆角按钮 : </h4>
                        <spen :style='样式2'>英:round,类型:boolean,默认:FALSE</spen><br>
                    </div>

                    <div style="text-align: left; margin-left: 30px;">
                        <el-radio-group v-model="属性.round" size='small' @change="提交改变">
                            <el-radio :label=true>是 true</el-radio>
                            <el-radio :label=false>否 false</el-radio>
                            <el-radio :label=null>无 </el-radio>
                        </el-radio-group>
                    </div>
                    <!-- 是否为圆形按钮 -->
                    <div :style='样式1'>
                        <h4>圆形按钮 : </h4>
                        <spen :style='样式2'>英:circle,类型:boolean,默认:FALSE</spen><br>
                    </div>

                    <div style="text-align: left; margin-left: 30px;">
                        <el-radio-group v-model="属性.circle" size='small' @change="提交改变">
                            <el-radio :label=true>是 true</el-radio>
                            <el-radio :label=false>否 false</el-radio>
                            <el-radio :label=null>无 </el-radio>
                        </el-radio-group>
                    </div>
                    <!-- 是否为加载中状态 -->
                    <div :style='样式1'>
                        <h4>加载中状态 : </h4>
                        <spen :style='样式2'>英:loading,类型:boolean,默认:FALSE</spen><br>
                    </div>

                    <div style="text-align: left; margin-left: 30px;">
                        <el-radio-group v-model="属性.loading" size='small' @change="提交改变">
                            <el-radio :label=true>是 true</el-radio>
                            <el-radio :label=false>否 false</el-radio>
                            <el-radio :label=null>无 </el-radio>
                        </el-radio-group>
                    </div>
                    <!-- 自定义加载中状态图标组件 -->
                    <div :style='样式1'>
                        <h4>//自定义加载中状态图标组件 : </h4>
                        <spen :style='样式2'>英:loading-icon,类型:string / Component,默认:Loading</spen><br>
                    </div>
                    <!-- 按钮是否为禁用状态 -->
                    <div :style='样式1'>
                        <h4>禁用状态 : </h4>
                        <spen :style='样式2'>英:disabled,类型:boolean,默认:FALSE</spen><br>
                    </div>

                    <div style="text-align: left; margin-left: 30px;">
                        <el-radio-group v-model="属性.disabled" size='small' @change="提交改变">
                            <el-radio :label=true>是 true</el-radio>
                            <el-radio :label=false>否 false</el-radio>
                            <el-radio :label=null>无 </el-radio>
                        </el-radio-group>
                    </div>
                    <!-- 图标组件 -->
                    <div :style='样式1'>
                        <h4>图标组件 : </h4>
                        <spen :style='样式2'>英:icon,类型:string / Component,默认:—</spen><br>
                    </div>

                    <div style="text-align: left; margin-left: 30px;margin-top: 10px;">
                        <el-radio-group v-model="属性.icon" size='small' @change="提交改变">
                            <el-radio :label="Edit"><el-button size="small" :icon="Edit">编辑</el-button></el-radio>
                            <el-radio :label="Share"><el-button size="small" :icon="Share">共享</el-button></el-radio>
                            <el-radio :label="Search"><el-button size="small" :icon="Search">搜索</el-button></el-radio>
                            <el-radio :label="Delete"><el-button size="small" :icon="Delete">删除</el-button></el-radio>
                            <el-radio :label="Upload"><el-button size="small" :icon="Upload">下载</el-button></el-radio>
                            <el-radio :label=null>无 </el-radio>
                        </el-radio-group>
                    </div>
                    <!-- 原生 autofocus 属性 -->
                    <div :style='样式1'>
                        <h4>原生 autofocus 属性 : </h4>
                        <spen :style='样式2'>英:autofocus,类型:boolean,默认:FALSE</spen><br>
                    </div>

                    <div style="text-align: left; margin-left: 30px;">
                        <el-radio-group v-model="属性.autofocus" size='small' @change="提交改变">
                            <el-radio :label=true>是 true</el-radio>
                            <el-radio :label=false>否 false</el-radio>
                            <el-radio :label=null>无 </el-radio>
                        </el-radio-group>
                    </div>
                    <!-- 原生 type 属性 -->
                    <div :style='样式1'>
                        <h4>原生 type 属性 : </h4>
                        <spen :style='样式2'>英:native-type,类型:enum,默认:button</spen><br>
                    </div>
                    <!-- 自动在两个中文字符之间插入空格 : -->
                    <div :style='样式1'>
                        <h4>自动插入空格 : </h4>
                        <spen :style='样式2'>英:auto-insert-space,类型:boolean,默认:—</spen><br>
                    </div>

                    <div style="text-align: left; margin-left: 30px;">
                        <el-radio-group v-model="属性['auto-insert-space']" size='small' @change="提交改变">
                            <el-radio :label=true>是 true</el-radio>
                            <el-radio :label=false>否 false</el-radio>
                            <el-radio :label=null>无 </el-radio>
                        </el-radio-group>
                    </div>
                    <!-- 自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色 : -->
                    <div :style='样式1'>
                        <h4>自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色 : </h4>
                        <spen :style='样式2'>英:color,类型:string,默认:—</spen><br>
                    </div>
                    <div style="text-align: left; margin-left: 30px;margin-top: 10px;">
                        <spen style="font-size: 12px;"> 选择颜色 : </spen><el-color-picker v-model="属性.color"
                            style="margin-left: 10px;"></el-color-picker>
                        <el-button size="small" :icon="Delete" style="margin-left: 20px;" @click="删除颜色">删除颜色</el-button>
                    </div>


                    <!-- 自定义元素标签 -->
                    <div :style='样式1'>
                        <h4>//自定义元素标签 : </h4>
                        <spen :style='样式2'>英:tag,类型:string / Component,默认:button</spen><br>
                    </div>


                </el-scrollbar>
            </div>
        </div>
        <!-- 左边 -->
        <div style="width: calc(100vw - 300px);;background-color: rgb(160, 178, 194); text-align: center;height: 99%;">
            <el-button @click="" v-bind="属性" style="margin-top: 20px;" >按钮</el-button>
            <el-input v-model="代码" :autosize="{ minRows: 5, maxRows: 50 }" type="textarea" placeholder="代码展示" style="width: 98%;margin-top: 50px;"/>

            </div>
        </div>
</template>
<script setup>
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import { ElMessage, formItemContextKey, ElMessageBox } from 'element-plus'
import { ref, reactive } from 'vue'
import{getCurrentInstance} from 'vue'
const { proxy } = getCurrentInstance();
const 提交方法 = proxy.API.提交方法 //提交方法('方法名',.....其他参数)
const ws广播 = proxy.API.监听ws广播 //监听ws广播('方法名',function(参数)) //广播 就是所有用户都会收到
const ws标识 = proxy.API.监听ws标识 //监听ws标识('方法名','标识',function(参数)) // 标识 相同标识的都会收到  比如多用户账号指定某账号  和 账号多处登录
const 跳转路由 =proxy.router

const 代码 = ref('')
const 提交改变=async()=>{
    let 结果=await 提交方法("组件修改",组件名.value,属性.value)
    代码.value=结果
}

const 组件名 = ref('按钮')
const 属性 = ref({
    size: '',//尺寸
    type: '',//类型
     plain: null,//是否为朴素按钮
     text: null,//是否为文字按钮
     bg: null,//是否显示文字按钮背景颜色
     link:null,//是否为链接按钮
     round:null,//是否为圆角按钮
     circle:null,//是否为圆形按钮
     loading: null,//是否为加载中状态
     'loading-icon': null,//自定义加载中状态图标组件
     disabled: null,//按钮是否为禁用状态
     icon: null,//图标组件
     autofocus: '',//原生 autofocus 属性
     'native-type': '',//原生 type 属性
     'auto-insert-space': null,//自动在两个中文字符之间插入空格
     color: '',//自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色
     //tag: null,//自定义元素标签

})
const 重置组件=()=>{
    let 原生属性 = {
    size: '',//尺寸
    type: '',//类型
     plain: null,//是否为朴素按钮
     text: null,//是否为文字按钮
     bg: null,//是否显示文字按钮背景颜色
     link:null,//是否为链接按钮
     round:null,//是否为圆角按钮
     circle:null,//是否为圆形按钮
     loading: null,//是否为加载中状态
     'loading-icon': null,//自定义加载中状态图标组件
     disabled: null,//按钮是否为禁用状态
     icon: null,//图标组件
     autofocus: '',//原生 autofocus 属性
     'native-type': '',//原生 type 属性
     'auto-insert-space': null,//自动在两个中文字符之间插入空格
     color: '',//自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色
     //tag: null,//自定义元素标签

    }
    属性.value=原生属性
    提交改变()
}

const 样式1 = ref('display: flex;margin-top: 10px;margin-left: 5px;font-size: 14px;border: 1px solid #ccc;width:95%')
const 样式2 = ref('color:rgb(190, 161, 161);font-size: 10px;margin-left: 10px;')

const 删除颜色 = () => {
    属性.value.color = ""
}



</script>
<style  scoped></style>
